<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxz">
    <title></title>
    <script src="jquery-3.1.1.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="test-jquery">
        <p id="para-1" class="color-red">JavaScript</p>
        <p id="para-2" class="color-green">Haskell</p>
        <p class="color-red color-green">Erlang</p>
        <p name="name" class="color-black text">Python</p>
        <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
            <legend>注册新用户</legend>
            <fieldset>
                <p><label>名字:<input name="name"></label></p>
                <p><label>邮件:<input name="email"></label></p>
                <p><label>口令:<input name="password" type="password" class="text"></label></p>
                <p><button type="submit">注册</button></p>
            </fieldset>
        </form>
    </div>
</body>
</html>
<script type="text/javascript">
    // 练习:使用jQuery选择器分别选出指定元素:
            // 仅选择JavaScript
            $('#para-1').css('color','orange');
    // 仅选择Erlang
        $('#test-jquery>p:nth-of-type(3)').css('color','cyan');
    // 同时选择JavaScript和Erlang
        $('#para-1,#para-2').css('color','purple');
    // 选择所有 <p>
        $('#test-jquery p').css('color','yellow');
    // 选择名字为name的input
        $('input[name="name"]').css('color','blue');
    // 同时选择名字为邮email和name的input
        $('input[name="name"],input[name="email"]').css('color','red');
</script>